<template>
  <div class="page-content">
    <div class="material-header">
      <el-radio-group v-model="queryParams.isCollection" @change="handleFilterChange">
        <el-radio-button :label="0">全部</el-radio-button>
        <el-radio-button :label="1">收藏</el-radio-button>
      </el-radio-group>

      <el-upload
        class="upload-btn"
        :action="uploadImgUrl"
        :show-file-list="false"
        :on-success="handleUploadSuccess"
        :headers="{ Authorization: accessToken }"
      >
        <el-button type="primary">
          <el-icon><Upload /></el-icon>
          上传素材
        </el-button>
      </el-upload>
    </div>

    <div class="material-grid">
      <el-card
        v-for="item in materialList"
        :key="item.id"
        class="material-item"
        :body-style="{ padding: '0px' }"
      >
        <el-image
          :src="item.url"
          fit="cover"
          class="material-image"
          :preview-src-list="[item.url]"
        />
        <div class="material-actions">
          <el-button-group>
            <el-button
              :type="item.isCollection ? 'warning' : 'default'"
              @click="toggleCollect(item.id)"
            >
              <el-icon><Star /></el-icon>
              <span>{{ item.isCollection ? '已收藏' : '收藏' }}</span>
            </el-button>
            <el-button type="danger" @click="deleteImage(item.id)">
              <el-icon><Delete /></el-icon>
              <span>删除</span>
            </el-button>
          </el-button-group>
        </div>
      </el-card>
    </div>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.size"
        :total="total"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Star, Delete, Upload } from '@element-plus/icons-vue'
  import { WmMaterialService } from '@/api/wmMaterialApi'
  import type { WmMaterialItem, WmMaterialParams } from '@/typings/wmMaterial'
  import { useUserStore } from '@/store/modules/user'

  // 导入用户信息
  const { accessToken } = useUserStore()

  const ss = 'aaa'
  console.log(ss)

  // 上传图片地址
  const { VITE_API_URL } = import.meta.env
  const uploadImgUrl = VITE_API_URL + '/wemedia/material/upload'

  // 查询参数
  const queryParams = ref<WmMaterialParams>({
    page: 1,
    size: 10,
    isCollection: 0
  })

  const materialList = ref<WmMaterialItem[]>([])
  const total = ref(0)

  // 加载素材列表
  const loadMaterialList = async () => {
    const res = await WmMaterialService.getMaterialList(queryParams.value)
    materialList.value = res.records
    total.value = res.total
  }

  // 切换收藏状态
  const toggleCollect = async (id: number) => {
    // TODO: 调用收藏/取消收藏API
    await WmMaterialService.collectMaterial(id)
    loadMaterialList()
    ElMessage.success('操作成功')
  }

  // 删除图片
  const deleteImage = (id: number) => {
    ElMessageBox.confirm('确认删除该图片吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      // TODO: 调用删除API
      await WmMaterialService.deleteMaterial(id)
      ElMessage.success('删除成功')
      await loadMaterialList()
    })
  }

  // 上传成功回调
  const handleUploadSuccess = () => {
    ElMessage.success('上传成功')
    loadMaterialList()
  }

  // 筛选切换
  const handleFilterChange = () => {
    queryParams.value.page = 1
    loadMaterialList()
  }

  // 分页大小改变
  const handleSizeChange = (val: number) => {
    queryParams.value.size = val
    loadMaterialList()
  }

  // 页码改变
  const handleCurrentChange = (val: number) => {
    queryParams.value.page = val
    loadMaterialList()
  }

  onMounted(() => {
    loadMaterialList()
  })
</script>

<style scoped>
  .material-container {
    padding: 20px;
  }

  .material-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .material-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
  }

  .material-item {
    position: relative;
    overflow: hidden;
  }

  .material-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
  }

  .material-actions {
    display: flex;
    justify-content: center;
    padding: 10px;
    background-color: #fff;
  }

  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
</style>
